{% extends 'base.html' %}

{% block body %}

{% embed 'view-edit.html' %}
  {% block createnew %}
  {% include 'catstat-view-edit.html' %}
    <div class='d-flex'>
      <div class='align-self-center flex-grow-1 mr-2'>
        {# CUSTOM ID #}
        {# TITLE #}
        <h1 class='text-dark' >
          {% if Entity.entityData.custom_id %}
            <span title='{{ 'Custom ID'|trans }}' class='color-medium'>{{ Entity.entityData.custom_id }}</span>
          {% endif %}
           <!-- [html-validate-disable-block prefer-native-element: suppress error from malle] -->
          <span id='documentTitle' class='breakable malleableTitle hl-hover-gray rounded py-1' data-target='title' data-endpoint='{{ Entity.entityType.value }}' data-id='{{ Entity.id }}'>{{ Entity.entityData.title }}</span>
        </h1>
      </div>
      <div class='ml-auto'>
        {% include 'create-new.html' %}
      </div>
    </div>
  {% endblock %}
  {% block createmodal %}
    {% include 'show-view-edit.html' %}
  {% endblock %}
{% endembed %}

{% include('view-edit-toolbar.html') %}

<section id='main_section' aria-label='main section'>

  {# DATE #}
  <div class='d-flex mb-2 justify-content-between '>
    {% if Entity.entityType.value != 'experiments_templates' and Entity.entityType.value != 'items_types' %}
      <div class='form-inline'>
        <label for='date_input' class='col-form-label mr-3 edit-mode-label justify-content-start d-sm-block d-none'>{{ 'Started on'|trans }}</label>
        {# the input expects date in YYYY-MM-DD format, and it will be displayed according to the browser's locale #}
        <input id='date_input' data-trigger='blur' data-model='{{ Entity.entityType.value }}/{{ Entity.entityData.id }}' data-target='date' type='date' value='{{ Entity.entityData.date|date('Y-m-d') }}' class='form-control' />
      </div>
    {# CUSTOM ID #}
    <div class='d-flex ml-2 d-inline-flex flex-nowrap align-items-center'>
      <label for='custom_id_input' class='col-form-label mr-3 edit-mode-label d-sm-block d-none'>{{ 'Custom ID'|trans }}</label>
      <div class='input-group'>
        <div class='input-group-prepend'>
          <button class='btn btn-secondary' type='button' data-action='get-next-custom-id' data-endpoint='{{ Entity.entityType.value }}'>{{ 'Get next'|trans }}</button>
        </div>
        <input id='custom_id_input' class='form-control' data-trigger='change' data-model='{{ Entity.entityType.value }}/{{ Entity.entityData.id }}' data-target='custom_id' type='number' min='0' value='{{ Entity.entityData.custom_id }}' />
      </div>
    </div>
    {% endif %}
  </div>

  {# TAGS #}
  {% include('edit-tags.html') %}

  {# BODY #}
  <hr>
  <h3 data-action='toggle-next' data-opened-icon='fa-caret-down' data-closed-icon='fa-caret-right' data-toggle-target='mainTextDiv' class='d-inline togglable-section-title' tabindex='0' role='button' aria-expanded='true'><i class='fas fa-caret-{{ displayMainText ? 'down' : 'right' }} fa-fw mr-2'></i>{{ 'Main text'|trans }}</h3>
  <div data-save-hidden='mainTextDiv' {{ not displayMainText ? 'hidden' }} id='mainTextDiv'>
    <div class='mt-2' id='entityBodyEditorDiv' data-content-type='{{ Entity.entityData.content_type }}'>{# << this div is important around the textarea to fix an issue on mobile editor. See #3107 #}
      {# tinymce or markdown? #}
      {% if Entity.entityData.content_type == '2' %}
        <textarea aria-label='{{ 'Main content'|trans }}' id='body_area' class='markdown-textarea' data-language='{{ App.getJsLang }}' name='body'>{{ Entity.entityData.body }}</textarea>
      {% else %}
      {# do not display body if set in metadata, done via css to avoid delayed disappearance after JS is executed #}
        {% if App.devMode -%}
          <!-- [html-validate-disable-block unique-landmark, element-permitted-content, no-deprecated-attr, prefer-native-element: suppress errors from tinymce] -->
        {%- endif %}
        <textarea aria-label='{{ 'Main content'|trans }}' id='body_area' class='mceditable invisible' name='body'>{{ Entity.entityData.body }}</textarea>
      {% endif %}
    </div>
    <div class='d-flex ml-1'>
      {# LAST SAVED #}
      <div>
        <span class='smallgray'>{{ 'Last saved:'|trans }}</span>
        <span id='lastSavedAt' class='ml-1 relative-moment smallgray' title='{{ Entity.entityData.modified_at }}'></span>
      </div>
      {# SWITCH EDITOR #}
      <div class='ml-auto'>
        <button type='button' class='btn btn-sm hl-hover-gray p-1 rounded' data-action='switch-editor'><i class='fas fa-pencil-alt fa-fw'></i> {{ 'Switch editor'|trans }}</button>
        {# Display main text switch #}
        <label class='ml-1 small' for='displayMainTextSliderInput'>{{ 'Display main text'|trans }}</label>
        <label class='switch'>
          <input type='checkbox' {{ Entity.entityData.metadata|extractDisplayMainText() ? 'checked="checked"' }} id='displayMainTextSliderInput'>
          <span class='slider'></span>
        </label>
      </div>
    </div>

    <div class='mt-1 text-center'>
      <button type='button' {{ not displayMainText ? 'hidden' }} data-action='update-entity-body' class='btn btn-primary'>{{ 'Save'|trans }}</button>
      <button type='button' data-action='update-entity-body' data-redirect='view' class='btn btn-secondary'>{{ 'Save and go back'|trans }}</button>
    </div>
  </div>
</section>

<hr>
{# EXTRA FIELDS #}
{% include('field-builder-modal.html') %}
<h3 data-action='toggle-next' data-opened-icon='fa-caret-down' data-closed-icon='fa-caret-right' class='d-inline togglable-section-title' tabindex='0' role='button' aria-expanded='true'><i class='fas fa-caret-down fa-fw mr-2'></i>{{ 'Extra fields'|trans }}</h3>
<div data-save-hidden='metadataDiv' class='col-md-8 mt-4'>
  {# this div is filled in JS by Metadata.class.ts edit() #}
  <div id='metadataDiv'></div>
  <div class='mt-3 row'>
    <button type='button' data-action='toggle-modal' data-target='fieldBuilderModal' class='btn btn-secondary' data-cy='addMetadataField'>{{ 'Add field'|trans }}</button>
    <button type='button' data-action='toggle-modal' data-target='fieldLoaderModal' class='ml-3 btn hl-hover-gray' data-cy='loadMetadataFields'>{{ 'Load fields'|trans }}</button>
  </div>
</div>
<hr>



{% include 'uploads.html' %}

{% include 'steps-edit.html' %}

{% include 'spreadsheet-editor.html' %}

{% include 'links.html' %}

{% include 'storage-view-edit.html' %}

{# PERMISSIONS #}
<h3 title='{{ 'Toggle visibility'|trans }}' data-action='toggle-next' data-opened-icon='fa-caret-down' data-closed-icon='fa-caret-right' class='d-inline togglable-section-title' tabindex='0' role='button' aria-expanded='true' aria-controls='permissionsDiv'><i class='fas fa-caret-down fa-fw mr-2'></i>{{ 'Permissions'|trans }}</h3>
<div class='mt-2 ml-3' id='permissionsDiv' data-save-hidden='permissionsDiv'>
  {% if Entity.entityData.canread_target %}
    <h5>{{ 'Permissions for the template'|trans }}</h5>
  {% endif %}
  {% include('edit-permissions.html') %}
  {# templates also have a read/write target #}
  {% if Entity.entityData.canread_target %}
   {# TARGET PERMISSIONS #}
    <h5>{{ 'Permissions for the derived entry'|trans }}</h5>
    <p class='smallgray'>{{ 'Entries created from this template will inherit these permissions. If they are locked down, the permissions will not be modifiable by Users, only Admins.'|trans }}</p>
    <div class='d-flex mb-2 align-items-center'>
      {# CANREAD #}
      {% set rw = 'canread_target' %}
      {% set can = Entity.entityData.canread_target|canToHuman %}
      {% include('view-permissions.html') %}
    </div>
    <div class='d-flex'>
      <label for='canread_is_immutable' class='col-form-label mr-2'>{{ 'Lock down read permissions'|trans }}</label>
      <label class='switch ucp-align'>
        <input type='checkbox' autocomplete='off' data-trigger='change' data-model='{{ Entity.entityType.value ~ '/' ~ Entity.id }}' data-target='canread_is_immutable' {{ Entity.entityData.canread_is_immutable ? 'checked="checked"' }} id='canread_is_immutable'>
        <span class='slider'></span>
      </label>
    </div>
    <div class='d-flex mb-2 align-items-center'>
      {# CANWRITE #}
      {% set rw = 'canwrite_target' %}
      {% set can = Entity.entityData.canwrite_target|canToHuman %}
      {% include('view-permissions.html') %}
    </div>
    <div class='d-flex'>
      <label for='canwrite_is_immutable' class='col-form-label mr-2'>{{ 'Lock down write permissions'|trans }}</label>
      <label class='switch ucp-align'>
        <input type='checkbox' autocomplete='off' data-trigger='change' data-model='{{ Entity.entityType.value ~ '/' ~ Entity.id }}' data-target='canwrite_is_immutable' {{ Entity.entityData.canwrite_is_immutable ? 'checked="checked"' }} id='canwrite_is_immutable'>
        <span class='slider'></span>
      </label>
    </div>
  {% endif %}
</div>
<hr>

{# DOODLE #}
{# id for the i is needed by the annotate-image action #}
<h3 data-action='toggle-next' data-opened-icon='fa-caret-down' data-closed-icon='fa-caret-right' class='d-inline togglable-section-title' tabindex='0' role='button' aria-expanded='false' aria-controls='doodleDiv'><i id='doodleDivIcon' class='fas fa-caret-right fa-fw mr-2'></i>{{ 'Draw something'|trans }}</h3>
<div id='doodleDiv' hidden class='mt-2' data-save-hidden='doodleDiv'>
  <div class='d-flex'>
    {# do not use w-100 here as it will break the canvas #}
    <canvas class='bg-white rounded' width='800' height='600' id='doodleCanvas'></canvas>

    <div class='ml-3'>
      <hr>
      <div>
        <label for='doodleStrokeStyle'>{{ 'Color'|trans }}</label>
        <input type='color' name='strokeStyle' value='#29aeb9' id='doodleStrokeStyle' />
      </div>

      <hr>

      <div id='doodleStrokeWidthContainer'>
        <label for='doodleStrokeWidth'>{{ 'Stroke width'|trans }}</label>
        <input type='range' min='1' max='20' name='strokeWidth' value='5' id='doodleStrokeWidth' />
      </div>

      <hr>

      <div>
        <input type='checkbox' id='doodleEraser' /> <label for='doodleEraser'>{{ 'Eraser'|trans }}</label>
      </div>

      <hr>

      <p>{{ 'Use %sCtrl%s + click to add text'|trans|format('<kbd>', '</kbd>')|raw }}</p>

      <hr>
      <div>
        <button type='button' id='clearCanvas' class='btn btn-danger'>{{ 'Clear'|trans }}</button>
        <button type='button' id='saveCanvas' class='btn btn-primary' data-type='{{ Entity.entityType.value }}' data-id='{{ Entity.id }}'>{{ 'Save'|trans }}</button>
      </div>
    </div>
  </div>
</div>

<hr>
{% include 'json-editor.html' %}
<hr>

<div id='info'
    data-page='edit'
    data-type='{{ Entity.entityType.value }}'
    data-id='{{ Entity.id }}'
>
</div>
{% endblock body %}
